<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" align="left" style="padding-left: 20px">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-form-item prop="title" label="消息标题">
          <el-input v-model="filters.title" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="发布时间：" prop="startTime">
            <el-date-picker
              v-model="filters.startTime"
              type="datetime"
              placeholder="开始时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
              @change="changeStartDate"
              :picker-options="startDateDisabled"
            ></el-date-picker>
          </el-form-item>
          <span class="times-to">-</span>
          <el-form-item prop="endTime">
            <el-date-picker
              v-model="filters.endTime"
              type="datetime"
              placeholder="结束时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
              @change="changeEndDate"
              :picker-options="endDateDisabled"
            ></el-date-picker>
          </el-form-item>

        <el-form-item prop="status" label="当前状态">
          <el-select v-model="filters.status" placeholder="全部" clearable>
            <el-option label="显示" :value="1"></el-option>
            <el-option label="不显示" :value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-row style="text-align: right">
          <el-form-item>
            <kt-button
              icon="fa fa-plus"
              :label="$t('action.add')"
              type="primary"
              @click="handleAdd"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
          </el-form-item>

        </el-row>
      </el-form>
    </div>


    <!--表格+分页器-->
    <div style="width:100%">
      <el-table
        :data="tableData"
        :header-cell-style="{ 'color': '#FFF','background-color': '#409EFF','text-align': 'center'}"
        :highlight-current-row="true"
        :max-height="1500"
        border
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" fixed width="50"></el-table-column>
        <el-table-column align="center" label="消息标题">
          <template slot-scope="scope">
            <span>{{ scope.row.title}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="消息分类">
          <template slot-scope="scope">
            <span v-show="scope.row.category == 1">系统消息</span>
            <span v-show="scope.row.category == 2">触发消息</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="更新时间">
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="当前状态">
          <template slot-scope="scope">
            <span v-show="scope.row.status==1">显示</span>
            <span v-show="scope.row.status==2">不显示</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="阅读数">
          <template slot-scope="scope">
            <span>{{scope.row.readNum}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="收藏数">
          <template slot-scope="scope">
            <span>{{scope.row.collectNum}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="分享数">
          <template slot-scope="scope">
            <span>{{scope.row.shareNum}}</span>
          </template>
        </el-table-column>
        <el-table-column
          class-name="status-col"
          align="center"
          fixed="right"
          label="操作"
          width="200"
        >
          <template slot-scope="scope">
            <el-button @click="handleDetail(scope.row)" type="primary" size="mini">查看</el-button>
            <el-button @click="handleEdit(scope.row)" type="primary" size="mini" v-if="scope.row.category ==1">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="currentChange"
          :current-page="filters.start"
          :page-size="filters.limit"
          :total="totalSize"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format, formatDate2 } from "@/utils/datetime";
import { exportExcel } from "@/utils/excel";
export default {
  components: {
    PopupTreeInput,
    KtButton,
    TableColumnFilterDialog,
  },
  filters: {
    formatDate: function (time) {
      if (time != null && time != "") {
        var date = new Date(time);
        return formatDate2(date);
      } else {
        return "";
      }
    },
  },
  data() {
    return {
      startDateDisabled: {},//开始时间限制
      endDateDisabled: {},//结束时间限制
      categoryList: [],
      size: "small",
      filters: {
        startTime: null,
        endTime: null,
        title: null,
        status: null,
      },
      visible: false,
      tableData: [],
      totalSize: 0,
      columns: [],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: [],
      editLoading: false,
    };
  },
  methods: {
    // 时间限制
    changeStartDate: function() {
      var this_ = this;
      this_.endDateDisabled = {
        disabledDate: time => {
          if (this_.filters.startTime) {
            return time.getTime() <= new Date(this_.filters.startTime).getTime();
          }
        }
      };
    },
    changeEndDate: function() {
      var this_ = this;
      this_.startDateDisabled = {
        disabledDate: time => {
          if (this_.filters.endTime) {
            return time.getTime() >= new Date(this_.filters.endTime).getTime();
          }
        }
      };
    },
    // 获取分页数据
    findPage: function (data) {
      if (data != null && data.start != null) {
        if (data.start != null) {
          this.pageRequest.pageNum = data.start;
        }
        if (data.pageSize != null) {
          this.pageRequest.pageSize = data.limit;
        }
      }
      let this_ = this;
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }

      this_.filters.pageNum = this.pageRequest.pageNum;
      this_.filters.pageSize = this.pageRequest.pageSize;

      this.utils.request.queryInfomationListPage(this_.filters, function (res) {
        if (res.data == null) {
          res.data = [];
          res.totle = 0;
        }
        this_.tableData = res.data.rows;
        this_.totalSize = Number(res.data.total);
      });
    },
    // 新增
    handleAdd: function (params) {
      this.$router.push({path: "/InfomationAdd/",query: { id: 0, edit: false }});
    },

    // 批量删除
    handleDelete: function (data) {
      var ids = "";
      for (var i = 0; i < data.params.length; i++) {
        ids = ids + data.params[i].id + ",";
      }
      data.params.ids = ids;
    },

    // 显示编辑界面
    handleEdit: function (params) {
      this.$router.push({ path: "/InfomationEdit/", query: { id: params.id, edit: true },});
    },

    // 显示详情界面
    handleDetail: function (params) {
      this.$router.push({
        path: "/InfomationDetail/",
        query: { id: params.id, edit: false },
      });
    },
    // 时间格式化
    dateFormat: function (date) {
      return formatDate2(date);
    },
    //分页
    currentChange(start) {
      this.filters.start = start;
      this.findPage();
    },
    //分页
    sizeChange(limit) {
      this.filters.start = 1;
      this.filters.limit = limit;
      this.findPage();
    },
    // 重置
    resetForm: function () {
      this.filters = {
        startTime: null,
        endTime: null,
        title: null,
        status: null,
      };
      this.findPage(null);
    },
  },
  mounted() {
    this.findPage(null);
  },
};
</script>

<style scoped lang='scss'>
</style>
